<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="js/d3.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  </head>
  <body>
  
   <div id="test"></div>
 
    <script type="text/javascript">
      var sessions = new Array(
        {id: 1, distance: 50, test: 1},
        {id: 2, distance: 50, test: 1}
 );
      
    // create the table header
var thead = d3.select("#test")
.append("table")
//.style("border-collapse", "collapse")
.style("border", "2px black solid")
.append("th")
.selectAll("th")
.data(d3.keys(sessions[0]))
.enter().append("th")
.text(function(d){return d})
.append("tr")
.selectAll("tr")
.data(sessions).enter().append("tr");
// fill the table
// create rows
//var tr = d3.select("tbody").selectAll("tr")
//.data(sessions).enter().append("tr")
 
// cells
/*var td = tr.selectAll("td")
  .data(function(d){return d3.values(d)})
  .enter().append("td")
  .text(function(d) {return d})*/
 
 
 
 
    </script>
 
  </body>
</html>